<script lang="ts" setup>
import { ColPage, useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { getDictList, dictdataRemove } from './data/api';
import { formOptions, gridOptions, DictId, AlldictList } from './data/options';
import { EditIcon } from '@vben/icons';
import { Button, Popconfirm, Popover, InputSearch } from 'ant-design-vue';
import EditDrawer from './components/editDrawer.vue';
import DictModel from './components/dictModel.vue';
const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: EditDrawer,
});
const dictModel = ref<any>(null);

onMounted(() => {
  initData();
});

watch(
  () => DictId.value,
  (n, o) => {
    console.log(n, o);
    gridApi.query();
  },
);

// 打开抽屉
const openDrawer = (row: any) => {
  drawerApi.setData({
    ...row,
  });
  drawerApi.open();
};

//  初始化数据
const initData = async () => {
  console.log('initData');
  let { data } = await getDictList({});
  AlldictList.value = data;
};

//  布局配置
const layoutProps = reactive({
  leftWidth: 20,
  rightWidth: 80,
  leftCollapsible: false, //左侧是否可折叠
  resizable: false, //是否可拖动
  splitHandle: false, //是否显示拖动把手
  splitLine: false, //是否显示分割线
});

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  formOptions,
  gridEvents: {},
  // 属性
  // 事件
});

// 搜索
const searchValue = ref('');
const dictList = computed(() => {
  return AlldictList.value.filter((item) => {
    return item.dicTitle.includes(searchValue.value);
  });
});
const onSearch = () => {
  console.log('onSearch');
  // gridApi.query();
};

// 删除
const removeDictdata = async (row: any) => {
  let res: any = await dictdataRemove({ ids: row.dictDataId });
  console.log(res);
  gridApi.query();
};
</script>

<template>
  <div>
    <ColPage auto-content-height v-bind="layoutProps">
      <template #left>
        <div class="contBox mr-4 h-full p-0">
          <div class="flex_rb dictTop">
            <Button type="primary" @click="dictModel?.open()">添加分类</Button>
            <InputSearch
              v-model:value="searchValue"
              placeholder="请输入关键词"
              style="width: 160px"
              @search="onSearch"
            ></InputSearch>
          </div>
          <ul class="scrollY h-full">
            <li
              class="flex_rb borderRadius pointer hover dictItem px-2 py-2 transition"
              v-for="(dict, index) in dictList"
              :key="index"
              @click="DictId = dict.dictId"
              :class="{ active: DictId === dict.dictId }"
            >
              <span>{{ dict.dicTitle }}</span>
              <EditIcon
                class="editIcon size-5"
                @click.stop="dictModel?.open(dict)"
              />
            </li>
          </ul>
        </div>
      </template>
      <Grid table-title="数据字典">
        <template #toolbar-tools>
          <Button type="primary" @click="openDrawer({})"> 新增 </Button>
        </template>
        <template #action="{ row }">
          <Button type="link" @click="openDrawer(row)">编辑</Button>
          <Popover title="" placement="bottom">
            <template #content>
              <Popconfirm
                title="确定要删除该数据？"
                @confirm="() => removeDictdata(row)"
              >
                <span class="cursor-pointer">删除</span>
              </Popconfirm>
            </template>
            <Button type="link">更多</Button>
          </Popover>
        </template>
      </Grid>
    </ColPage>
    <Drawer ref="dictDrawer" @success="() => gridApi.query()" />
    <DictModel ref="dictModel" @success="initData" />
  </div>
</template>

<style lang="scss" scoped>
.dictItem {
  .editIcon {
    opacity: 0;
    transition: opacity 0.3s linear;
  }
  &:hover {
    .editIcon {
      opacity: 1;
    }
  }
}
.dictTop {
  margin-bottom: 10px;
}
</style>
